<template>
    <div class="model-cards-sider">
        <div class="model-sider-title">{{ props._title }}</div>
        <div v-for="category_obj in _categories" class="model-sider-category">
            <div class="model-sider-tasks-type">{{ category_obj.name }}</div>
            <div class="model-sider-tasks">
                <el-tag
                    v-for="type_obj in category_obj.types"
                    class="model-sider-task"
                    :type="type_obj === _selected_type_obj ? 'primary' : 'info'"
                    @click.stop="onSelectType(category_obj, type_obj)"
                    >{{ type_obj.name }}</el-tag
                >
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, inject } from 'vue';
import categories from '@/js/config/categories.json';
const props = defineProps(['_title']);
const emit = defineEmits(['selectType']);
let vueApp = inject('vueApp');

const name = 'TypeBar';
let _categories = ref([]);
let _selected_type_obj = ref(null);

function onSelectType(category_obj, type_obj) {
    // console.log('onSelectType supertype = ', category_obj, ' type = ', type_obj);
    _selected_type_obj.value = type_obj;
    vueApp.setAlgoType({
        supertype: category_obj.supertype,
        type: type_obj.type
    });
    emit('selectType', {
        supertype: category_obj.supertype,
        type: type_obj.type
    });
}
function findAlgorithmType(data, targetSupertype, targetType) {
    for (const item of data) {
        if (item.supertype === targetSupertype) {
            const typeObj = item.types.find((typeObj) => typeObj.type === targetType);
            if (typeObj) {
                return typeObj;
            }
        }
    }
    return null;
}

onMounted(async () => {
    let algo_type = vueApp.getAlgoType();
    _categories.value = categories;
    _selected_type_obj.value = findAlgorithmType(categories, algo_type.supertype, algo_type.type);
});
</script>

<style scoped>
.model-cards-sider {
    width: 250px;
    min-width: 250px;
    height: 100%;
    background-color: rgb(250, 251, 251);
    margin: 2px;
    padding: 2px 8px 2px 10px;
    box-sizing: border-box;
}

.model-sider-title {
    margin: 15px 0px 5px 0px;
    font-size: 18px;
    font-weight: 700;
}

.model-sider-category {
    margin: 15px 0px 5px 0px;
}

.model-sider-tasks-type {
    font-size: 14px;
    margin: 0px 0px 4px 0px;
}

.model-sider-tasks {
    margin: 10px 0px 10px 0px;
}

.model-sider-task {
    margin: 0px 8px 8px 0px;
    cursor: pointer;
}
</style>
